<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Using an existing canvas to draw on</title>
    <style>
       
        button {
            clear: both;
            display: block;
        }
        .content {
            background: rgba(100, 255, 255, 0.5);
            padding: 50px 10px;
        }
    </style>
</head>
<body>
<div>
    <div id="d_1" class="content" style="width:500px">1.
	 2018年年初，微信的月活用户数已经突破了10亿，成为了国内首个月活超过10亿的产品。“3Q大战”之后的腾讯逐渐由封闭走向了开放，而微信作为腾讯在移动互联网时代最重要最成功的战略级产品，也在切实实践着腾讯的开放战略。在这样的大背景下，如何利用好微信内的流量，引导用户去做分享和传播，就成为摆在我们面前的重要课题。但是微信方面基于自身利益以及用户体验等因素的考虑，对于在微信内做分享和传播的内容及形式都有着很严格的规定和诸多的限制，稍不注意违反了这些规则就有可能受到惩罚，严重的甚至被微信封杀。
	</div>
	<br/><div id="c_1" style="display:none" ></div>
	<br/>
	<div id="d_2" class="content">2.Render the content in this element <strong>only</strong> onto the existing canvas element</div>
	<br/><div id="c_2" style="display:none"></div>
	<br/>
	<div id="d_3" class="content">3.以下说法正确的是？</div>
	<br/><div id="c_3" style="display:none"></div>
	<br/>
</div>
<!-- 水印-->
<canvas id="wm" width="500" height="100" style="display:none"></canvas>

<script type="text/javascript" src="html2canvas.min.js"></script>

<script type="text/javascript">
    
	
	   
	//1.绘制水印
	var wm= document.querySelector("#wm");
	var ctxl = wm.getContext("2d");   //返回一个用于在画布上绘图的环境
    ctxl.font="50px Arial";
	ctxl.rotate(-2*Math.PI/180);
	ctxl.globalAlpha=0.5;
    ctxl.strokeText("薛建新1234567890",10,50);
	
	
	
	//2.遍历转化为canvas
	document.querySelectorAll(".content").forEach(
	
			function(d) {
			   //console.log(d);
			   var id=d.id;
			   var cid="c_"+(id.split("_")[1]);
			   //console.log(cid);
			   var canvasDiv= document.querySelector("#"+cid);
			   
			   //scale：是用来调整生成图片屏幕分辨率的;
			   //useCROS：这个参数是用来设置是否允许使用跨域的图片进行访问的，好像默认就是true；
			   //logging：这个是日志打印的，实际上线不需要，所以就false；
			   var option={scale:2,logging:false};
			   html2canvas(d,option).then(function(canvas) {
					//添加水印
					var ctx=canvas.getContext("2d");
					var pat = ctx.createPattern(wm, "repeat");    //平铺
					ctx.fillStyle = pat;
					ctx.fillRect(0, 0, canvas.width, canvas.height);
					
					
					//设置显示
					canvasDiv.style.display="block";
					canvasDiv.appendChild(canvas);
					//删除自己
					d.parentNode.removeChild(d)
					
			   });
			}
	);
    

   
</script>
</body>
</html>
